<template>
  <div class='common-list' @scroll="showMore">
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
    >
      <slot></slot>
      <p class="no-data" v-if="formalListData.length>0">{{infos.info2}}</p>
    </van-pull-refresh>
  </div>
</template>
<script>
export default {
  props:['listData'],
  components: {},
  name: "",
  data() {
    return {
      isLoading: false,

      infos:{
        info1:"下拉加载",
        info2:"我也是有底线的哦~",
      }
    };
  },
  computed:{
    formalListData(){
      if(!this.listData)console.warn("公共下拉列表组件中没有传入列表数据")
      return this.listData || []
    }
  },
  methods: {
    onRefresh() {
      setTimeout(()=>{
        this.isLoading = false;
        _g.toMessage({
          error:2,
          msg:"加载成功..."
        })
      },2000)
    },

    /**
     * @name showMore 下拉加载
     */
    showMore(e){
      var top = e.target.scrollTop
      var height = e.target.offsetHeight
      var scroll = e.target.scrollHeight
      console.log(top,height,scroll)
      if(scroll===height + top){
        this.$emit('forMore')
      }
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.common-list {
  flex: 1;
  height:calc(100% - 100px);
  overflow: auto;
}
.no-data{
  text-align: center;
  font-size: 12px;
  line-height: 80px;
  color: #999;
}
</style>